<template>
  <div class="windowInfo">
    <h3>在网状态显示</h3>
    <div class="bodyBox">
      <div class="body">
        <h3>通信指控车</h3>
        <div>指控车1 指控车2<br />指控车3 指控车4</div>
      </div>
      <div class="body">
        <h3>导弹</h3>
        <div>导弹1 导弹2<br />导弹3 导弹4<br />导弹5 导弹6<br />导弹7 导弹8</div>
      </div>
      <!-- <a-table :columns="columns" :data-source="data" :pagination="false"> </a-table> -->
    </div>
  </div>
</template>
<script>
const columns = [
  // {
  //   dataIndex: '信道号',
  //   key: 'time',
  //   slots: { title: 'customTitle' },
  //   scopedSlots: { customRender: 'time' },
  // },
  {
    title: '在网状态显示',
    children: [
      {
        title: '指控车',
        dataIndex: 'No',
        key: 'No',
        width: 200,
      },
      {
        title: '导弹',
        dataIndex: 'user',
        key: 'user',
        width: 200,
      },
    ],
  },
  // {
  //   title: '占用者',
  //   dataIndex: 'user',
  //   key: 'user',
  // },
  // {
  //   title: '占用时间  ',
  //   key: 'time',
  //   dataIndex: 'time',
  //   // scopedSlots: { customRender: 'tags' },
  // },
  // {
  //   title: 'Action',
  //   key: 'action',
  //   scopedSlots: { customRender: 'action' },
  // },
]

const data = [
  {
    key: '1',
    time: '1-5',
    No: '车1，车2，车3，车4 ',
    user: '导弹1，导弹2，导弹3，导弹4，导弹5，导弹6，导弹7，导弹8，导弹9，导弹10，',
    tags: ['nice', 'developer'],
  },
]

export default {
  data() {
    return {
      data,
      columns,
    }
  },
}
</script>
<style>
/* .windowInf */
</style>
<style lang="less" scoped>
.windowInfo {
  h3 {
    color: #fff;
    border: 1px solid;
    margin-bottom: 0;
    margin: -1px;
  }

  line-height: 30px;
  text-align: center;
  color: #fff;
  padding: 15px;
  background: rgba(30, 36, 50, 0.6) !important;
  .bodyBox {
    // width: 250px;
    display: flex;
    .body {
      width: 250px;
      margin: -1px;
      border: 1px solid;
    }
  }
}

/* 四角边框--start */
.windowInfo {
  position: relative;
  // width: 300px;
  // /* height: 300px; */
  // margin: 300px auto;
  // /* background: rgba(1, 19, 67, 0.8); */

  border: 2px solid #58d0f3 !important;
  z-index: 1;
}

.windowInfo::before {
  position: absolute;
  content: '';
  top: -2px;
  bottom: -2px;
  left: 30px;
  width: calc(100% - 60px);
  /* border-top: 2px solid #016886; */
  /* border-bottom: 2px solid #016886; */
  border-bottom: 2px solid #4f78ae;
  border-top: 2px solid #4f78ae;
  z-index: -1;
}
.windowInfo::after {
  position: absolute;
  content: '';
  top: 30px;
  right: -2px;
  left: -2px;
  height: calc(100% - 60px);
  border-right: 2px solid #4f78ae;
  border-left: 2px solid #4f78ae;
  z-index: -1;
}

/* 四角边框--end */
</style>
